<template>
	<view class="page">
		<view class="box">
			<view class="flex"></view><!-- 左上角显白 -->
			<view class="top">
				<text class="ti">活动</text>
				<text class="ti" style="font-size: 50rpx;">预告</text>
				<text class="to">ACTIVITY NOTICE</text>
				<text class="too" @click="$Router.push({name: 'activityList'})">更多</text>
			</view>
			<view v-for="(item, index) in activities" :key="index">
				<view class="list" @tap="net(item.id)">
					<u-icon :name="items[index].icon" :custom-prefix="items[index].customIcon?'custom-icon':'uicon'"
						size="40"></u-icon>
					<text class="listtext">{{item.name}}</text>
					<u-icon style="margin-left: auto" name="arrow-right" size="40"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getActivities
	} from "@api"
	export default {
		data() {
			return {
				items: [{
						name: "纪念活动",
						icon: "grid-fill"
					},
					{
						name: "成果展览",
						customIcon: true,
						icon: "scale-fill"
					},
					{
						name: "继往开来",
						customIcon: true,
						icon: "flag-fill"
					},
					{
						name: "校友齐聚",
						customIcon: true,
						icon: "group-fill"
					},
					{
						name: "校园游览",
						customIcon: true,
						icon: "visit-fill"
					}
				],
				activities: [

				]
			}
		},
		methods: {
			net: function(index) {
				this.$Router.push({name:'activityDetail',params:{id:index}})
			}
		},
		created() {
			getActivities({
					page: 0,
					size: 3
				})
				.then(res => {
					this.activities = res;
				})
		}
	}
</script>

<style scoped>
	.page {
		overflow: hidden;
		width: 100%;
	}

	.box {
		position: relative;
		background: #bb2307;
		padding: 30upx;
	}

	.top {
		z-index: 2;
		margin-bottom: 60upx;
	}

	.ti {
		color: #ffffff;
		font-size: 70upx;
		font-weight: 600;
	}

	.to {
		color: #c8c8c8;
		margin-left: 40upx;
		font-size: 30upx;
	}
	
	.too {
		color: #ffffff;
		margin-left: 110upx;
		font-size: 30upx;
	}
	.list {
		color: #fcf1ce;
		display: flex;
		align-items: center;
		margin-top: 20upx;
		height: 120upx;
		background: rgba(0, 0, 0, 0.26);
		border-radius: 10upx;
		padding: 0 30upx;
		transition: all 0.1s;
		display: flex;
	}

	.listtext {
		margin-left: 30upx;
		font-size: 30upx;
	}

	.img {
		margin: 45upx 10upx;
		width: 50upx;
		height: 50upx;
	}

	.list:active {
		background: rgba(0, 0, 0, 0.34);
	}

	.flex {
		position: absolute;
		width: 400upx;
		height: 1000upx;
		top: -560upx;
		left: -200upx;
		background: rgba(255, 255, 255, 0.06);
		transform: rotate(70deg);
	}
</style>
